<template>
  <div>
    <!-- 头 -->
    <userTitel :title="title"></userTitel>
    <!-- 身体1 -->
    <el-card shadow="never">
      <!-- 1 -->
      <span>车型编号 : </span>
      <el-input
        v-model="carId"
        placeholder="请输入车型编号"
        style="width: 410px"
      ></el-input>
      <!-- 2 -->
      <span style="margin-left: 90px">应载重量 : </span>
      <el-select
        style="width: 385px"
        v-model="form.allowableLoad"
        placeholder="请选择应载重量"
      >
        <el-option
          v-for="item in optionsWeight"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 3 -->
      <span style="margin-left: 90px">应载体积 : </span>
      <el-select
        style="width: 355px"
        v-model="form.allowableVolume"
        placeholder="请选择应载体积"
      >
        <el-option
          v-for="item in optionsVolume"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- 4 -->
      <br />
      <div style="margin-top: 20px">
        <span>车辆类型 : </span>
        <el-input
          v-model="form.name"
          placeholder="请输入车型类型"
          style="width: 410px"
        ></el-input>
        <el-button
          style="
            width: 100px;
            margin-left: 50px;
            background: #e15536;
            color: #fff;
          "
          @click="collectCar"
          >搜索</el-button
        >
        <el-button style="width: 100px">重置</el-button>
      </div>
    </el-card>
    <!-- 身体2 -->
    <el-card shadow="never" style="margin-top: 20px">
      <el-button
        @click="addCar"
        style="background: #e15536; color: #fff; margin-bottom: 20px"
        >新增车型</el-button
      >
      <el-table
        border
        :data="formData"
        stripe
        style="width: 100%; background: #f8faff"
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="id" label="车型编号" width="260">
        </el-table-column>
        <el-table-column prop="name" label="车辆类型"> </el-table-column>
        <el-table-column prop="num" label="车辆数量"> </el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量 (吨)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="应载体积 (立方米)">
        </el-table-column>
        <el-table-column prop="measureLong" label="长 (米)"> </el-table-column>
        <el-table-column prop="measureWidth" label="宽 (米)"> </el-table-column>
        <el-table-column prop="measureHigh" label="高 (米)"> </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-link style="color: #139aff" @click="edit(row)">编辑</el-link>
            <span> | </span>
            <el-link type="danger" @click="del(row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增弹框 -->
    <el-dialog @close="close" :title="frame" :visible="showDialog">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="name" label="车辆类型">
          <el-input
            v-model="form.name"
            placeholder="请输入车辆类型"
            style="width: 380px"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="allowableLoad" label="应载重量">
          <el-input
            v-model="form.allowableLoad"
            placeholder="请输入应载重量"
            style="width: 380px"
            autocomplete="off"
          >
            <template #suffix>
              <span style="color: #333; margin-right: 10px">吨 </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="allowableVolume" label="应载体积">
          <el-input
            v-model="form.allowableVolume"
            placeholder="请输入车型体积"
            style="width: 380px"
            autocomplete="off"
          >
            <template #suffix>
              <span style="color: #333; margin-right: 10px">立方 </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="measureLong" label="长">
          <el-input
            v-model="form.measureLong"
            style="width: 380px"
            autocomplete="off"
          >
            <template #suffix>
              <span style="color: #333; margin-right: 10px">米 </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="measureWidth" label="宽">
          <el-input
            v-model="form.measureWidth"
            style="width: 380px"
            autocomplete="off"
          >
            <template #suffix>
              <span style="color: #333; margin-right: 10px">米 </span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="measureHigh" label="高">
          <el-input
            v-model="form.measureHigh"
            style="width: 380px"
            autocomplete="off"
          >
            <template #suffix>
              <span style="color: #333; margin-right: 10px">米 </span>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" style="margin-right: 20px">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCarModels,
  addCarEvery,
  editCarEvery,
  deleteCar,
  souCarEvery,
} from "@/api/car-models";
export default {
  name: "car-models",
  data() {
    return {
      showDialog: false, //新增车型弹层
      title: "车型管理",
      // 重量
      optionsWeight: [
        {
          value: 1,
          label: "<1.8(吨)",
        },
        {
          value: 2,
          label: "1.8-6(吨)",
        },
        {
          value: 3,
          label: "6-14(吨)",
        },
        {
          value: 4,
          label: "14-30(吨)",
        },
        {
          value: 5,
          label: "30-50(吨)",
        },
        {
          value: 6,
          label: "50-100(吨)",
        },
        {
          value: 7,
          label: "100>(吨)",
        },
      ],
      // 体积
      optionsVolume: [
        {
          value: 1,
          label: "<3(m³)",
        },
        {
          value: 2,
          label: "3-5(m³)",
        },
        {
          value: 3,
          label: "5-10(m³)",
        },
        {
          value: 4,
          label: "10-15(m³)",
        },
        {
          value: 5,
          label: "15-30(m³)",
        },
        {
          value: 6,
          label: "30-50(m³)",
        },
        {
          value: 7,
          label: "50-80(m³)",
        },
      ],
      formData: [], //车辆数据列表
      page: {
        page: 1, //当前页
        pageSize: 10, //每页几条
      },
      currentPage: 1, //当前页数
      total: 0, //总条数
      // 编辑回显
      form: {
        name: "", //车辆类型
        allowableLoad: "", //应载重量
        allowableVolume: "", //应载体积
        measureLong: 0, //长
        measureWidth: 0, //宽
        measureHigh: 0, //高
      },
      // 校验
      rules: {
        name: [{ required: true, message: "请输入车辆类型", trigger: "blur" }],
        allowableLoad: [
          { required: true, message: "请输入应载重量", trigger: "blur" },
        ],
        allowableVolume: [
          { required: true, message: "请输入应载体积", trigger: "blur" },
        ],
      },
      // 行数据id
      carId: "",
    };
  },

  created() {
    this.getCarList();
  },
  computed: {
    frame() {
      return this.carId ? "编辑车型" : "新增车型";
    },
  },
  methods: {
    // 获取车辆列表数据
    async getCarList() {
      const res = await getCarModels(this.page);
      console.log(res);
      this.formData = res.data.items;
      // 总数
      this.total = +res.data.counts;
    },
    // 点击删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deleteCar(id);
          this.$message.success("删除成功");
          this.getCarList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击编辑回显
    edit(row) {
      this.showDialog = true;
      this.form = row;
      this.carId = this.form.id;
    },
    // 搜索
    async collectCar() {
      const res = await souCarEvery({
        page: this.page.page,
        pageSize: this.page.pageSize,
        name: this.form.name,
        id: this.carId,
      });
      // console.log(res);
      this.formData = res.data.items;
    },
    async submit() {
      await this.$refs.formRef.validate();
      if (!this.carId) {
        await addCarEvery(this.form);
        this.$message.success("添加成功");
      } else {
        await editCarEvery(this.carId, this.form);
        this.$message.success("修改成功");
      }
      this.getCarList();
      this.close();
    },
    // 关闭重置
    close() {
      this.showDialog = false;
      this.$refs.formRef.resetFields();
    },
    // 添加车型
    addCar() {
      // 打开弹窗
      this.showDialog = true;
      console.log("添加");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.getCarList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.page = val;
      this.getCarList();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer {
  line-height: 18px;
  text-align: center;
  margin-top: -40px;
}
::v-deep .el-dialog {
  width: 600px;
}
::v-deep .el-dialog__header {
  background-color: #f3f4f7;
  line-height: 24px;
  text-align-last: left;
}
::v-deep .el-dialog__body {
  margin-left: 50px;
  margin-right: 50px;
}
.block {
  margin-top: 20px;
  margin-left: 500px;
}
::v-deep .el-table tr {
  line-height: 24px;
}
::v-deep .el-card {
  text-align: left !important;
  line-height: 24px !important;
  span {
    font-weight: 600;
    font-size: 14px;
  }
}
</style>
